<template>
  <div>
    <button @click="changefn">情况二ref定义的监听基本数据类型</button>

    <div>数量：{{ age }}</div>
  </div>
</template>
<script setup lang="ts"  name= "person555">
import { reactive, ref, toRefs, toRef, computed, watch } from "vue"; //使用那个函数前必须先导入那个函数

let age = ref({
  name: "张三",
  ages: 15,
});

let changefn = () => {
  age.value.ages = age.value.ages + 1;
};
// watch("监视谁","回调函数",开启深度监听参数)
//age监听的是谁  是ref定义的数据  不是数据值 因此  是age
//不加第三个参数时,当整个内存地址替换的时候可以监听到,细小的变化看不到

var stopwatch = watch(
  age,
  (newvalue, oldvalue) => {
    console.log("age变化啦", newvalue, oldvalue); ////新值旧值可能一样 这个不仅在vue3中有这个问题,vue2中也有这个问题,若直接替换内存地址  他的新旧之不同
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>